<%@ include file="../common/IncludeTop.jsp"%>

<div id="Login" align="center">

	<form action="signonAction" method="post">
		<fieldset style="width:730px; margin:0px auto">
			<legend>User Login</legend>
			<br>Username: <input  type="text" name="username" id="username" onblur="checkUsername()" placeholder="please enter username"/>
			<img id="isExistInfo" src="images/white.png"><br/>
			</p>

			<p>Password: <input  type="password" name="password" id="password" onblur="getPsd()" placeholder="Please enter password"/>
				<img id="isRightInfo" src="images/white.png">
			</p><br/>
			<p >
				Randcode:<input  id="validation" type="text" name="image" onblur="getCode()" placeholder="Please enter code">
				<img   id="VerifyCode"  src="pictureCheckCode"  />
				<input type="button" value="New Code" id="flush">
				<font color="red">${requestScope.imageMess}</font>
				<img id="isTrueInfo" src="images/white.png">
				<br>

			</p><br/>

			<input type="submit" name="signon" value="Login" />


		</fieldset>
	</form>
	<script type="text/javascript">

		document.getElementById("flush").onclick = function () {
			// 获取img元素
			// 为了让浏览器发送请求到servlet, 所以改变src
			document.getElementById("VerifyCode").src =
					"pictureCheckCode?time=" + new Date().getTime();
		};
	</script>
	Need a user name and password?
	<a href="newAccountForm">Register Now!</a>
</div>
<script >
	var xhr;
	function checkUsername(){
		var username = document.getElementById("username").value;
		xhr = new XMLHttpRequest();
		xhr.onreadystatechange = process;
		xhr.open("GET","usernameIsExist?username="+username,true);
		xhr.send(null);
	}

	function process(){
		if(xhr.readyState == 4){
						if(xhr.status == 200){

							var responseInfo = xhr.responseText;
							if(responseInfo == "Exist"){
								document.getElementById("isExistInfo").src =
										"images/isExist.jpg" ;
							}
							else if(responseInfo =="Not Exist"){
								document.getElementById("isExistInfo").src =
										"images/notIsExist.jpg" ;
				}

			}
		}
	}

</script>
<script >
	var xhr;
	function getPsd(){
		var username = document.getElementById("username").value;
		xhr = new XMLHttpRequest();
		xhr.onreadystatechange = processPsd;
		xhr.open("GET","usernameIsRight?username="+username,true);
		xhr.send(null);
	}

	function processPsd(){
		var password = document.getElementById("password").value;
		if(xhr.readyState == 4){
			if(xhr.status == 200){

				var responseInfo = xhr.responseText;

				if(responseInfo ==password &&responseInfo !=""){
					document.getElementById("isRightInfo").src =
							"images/isExist.jpg" ;
				}
				else {
						document.getElementById("isRightInfo").src =
								"images/notIsExist.jpg" ;

				}

			}
		}
	}

</script>
<script>
	var xhr;
	function getCode(){
		var code = document.getElementById("validation").value;
		xhr = new XMLHttpRequest();
		xhr.onreadystatechange = processCode;
		xhr.open("GET","checkCode?code="+code,true);
		xhr.send(null);
	}
	function processCode(){
		if(xhr.readyState == 4){
			if(xhr.status == 200) {
				var responseInfo = xhr.responseText;

				if(responseInfo == 'T'){
					document.getElementById("isTrueInfo").src =
							"images/isExist.jpg" ;
				}
				else if(responseInfo =='F'){
					document.getElementById("isTrueInfo").src =
							"images/notIsExist.jpg" ;

				}
			}
		}
	}
</script>

<%@ include file="../common/IncludeBottom.jsp"%>

